<template>
  <ATable
    class="row-table"
    :data-source="tableData"
    :columns="columns"
    :showHeader="index === 0"
    :pagination="false"
    size="small"
  >
    <template #bodyCell="{ column, text, record }">
      <!-- 表格列 -->
      <template v-if="column.dataIndex !== 'operation'">
        <!-- 查看模式 -->
        <!-- <span v-show="!isEdit">{{ text }}</span> -->
        <span v-show="record.__state__ !== 'edit'">{{ text }}</span>
        <!-- 编辑模式 -->
        <Col
          v-show="record.__state__ === 'edit'"
          :column="column"
          :text="text"
          :record="record"
        ></Col>
      </template>

      <!-- 操作栏 -->
      <template v-else>
        <el-tooltip
          content="保存"
          placement="top"
        >
          <ElButton
            v-show="btnIsShow('save', record.__state__)"
            size="small"
            type="success"
            @click="handleSave(record as WithTableSignal<unknown>)"
          >
            <!-- 保存 -->
            <el-icon><CircleCheckFilled /></el-icon>
          </ElButton>
        </el-tooltip>

        <span>
          <el-tooltip
            content="修改"
            placement="top"
          >
            <ElButton
              v-show="btnIsShow('edit', record.__state__)"
              size="small"
              type="warning"
              @click="handleEdit(record as WithTableSignal<unknown>)"
            >
              <!-- 修改 -->
              <el-icon><EditPen /></el-icon>
            </ElButton>
          </el-tooltip>

          <el-tooltip
            content="添加"
            placement="top"
          >
            <ElButton
              v-show="btnIsShow('add', record.__state__)"
              size="small"
              type="primary"
              @click="$emit('add', index)"
            >
              <!-- 添加 -->
              <el-icon><CirclePlusFilled /></el-icon>
            </ElButton>
          </el-tooltip>

          <el-tooltip
            content="复制"
            placement="top"
          >
            <ElButton
              v-show="btnIsShow('copy', record.__state__)"
              size="small"
              type="primary"
              @click="$emit('copy', index)"
            >
              <!-- 复制 -->
              <el-icon><DocumentCopy /></el-icon>
            </ElButton>
          </el-tooltip>

          <el-tooltip
            content="删除"
            placement="top"
          >
            <ElButton
              v-show="btnIsShow('remove', record.__state__)"
              size="small"
              type="danger"
              @click="$emit('remove', index)"
            >
              <!-- 删除 -->
              <el-icon><DeleteFilled /></el-icon>
            </ElButton>
          </el-tooltip>
        </span>
      </template>
    </template>

    <template #footer>
      <slot></slot>
    </template>
  </ATable>
</template>

<script lang="ts">
import { computed, defineComponent, ref, type PropType } from "vue";
import { Table as ATable } from "ant-design-vue";
import type { Columns, WithTableSignal } from "./types";

import { useTableRowState } from "../XTable/useTableRowState";

import { ElInput, ElSelect, ElButton, ElIcon } from "element-plus";
import {
  Plus,
  EditPen,
  DeleteFilled,
  DocumentCopy,
  CirclePlusFilled,
  CircleCheckFilled,
} from "@element-plus/icons-vue";
import Col from "./Col.vue";

const OPERATION = "operation";

const { btnIsShow } = useTableRowState();

export default defineComponent({
  components: {
    ATable,
    ElButton,
    ElIcon,
    Col,
    Plus,
    EditPen,
    DeleteFilled,
    DocumentCopy,
    CirclePlusFilled,
    CircleCheckFilled,
  },
  emits: ["update:value", "add", "copy", "remove"],
  props: {
    columns: {
      type: Array as PropType<Columns<unknown>>,
      default: () => [],
    },
    value: {
      type: Object as PropType<
        WithTableSignal<{ [key: string | number]: any }>
      >,
      default: () => ({}),
    },
    index: Number,
  },
  data() {
    return {
      OPERATION,
    };
  },
  computed: {
    tableData() {
      return [this.value];
    },
    cols() {
      return this.columns
        .map((c) => c.dataIndex)
        .filter((e) => e !== OPERATION);
    },
  },
  methods: {
    btnIsShow,
    handleSave(row: WithTableSignal<unknown>) {
      row.__state__ = "view";
    },
    handleEdit(row: WithTableSignal<unknown>) {
      row.__state__ = "edit";
    },
  },
});
</script>

<style scoped>
.row-table :deep() .ant-table .ant-table-footer {
  padding: 0;
  background: transparent;
  border-radius: 0;
  border-bottom: 1px solid #f0f0f0;
}
.row-table :deep() .ant-table:hover .ant-table-footer,
.row-table :deep() .ant-table:hover .ant-table-row {
  background: #fafafa;
}

.row-table :deep() .ant-table td {
  border: none !important;
}
</style>
